<template>
  <el-form :inline="true" :model="searchData">
    <el-form-item
      v-for="col in formKey"
      :key="col.fieldName"
      :prop="col.fieldName"
    >
      <el-row
        v-if="
          col.isSearch === 1 &&
          col.webType !== 'el-date-picker' &&
          col.webType !== 'password' &&
          col.webType !== 'textArea'
        "
      >
        <el-col :span="8"> {{ col.nameCn }}: </el-col>
        <el-col :span="16">
          <component
            :is="col.webType"
            v-if="
              col.webType !== 'el-date-picker' && col.webType !== 'password'
            "
            v-model="searchData[col.fieldName]"
            :type="col.javaType"
            :value-format="timeFormat"
            :placeholder="'请输入' + col.nameCn"
            filterable
            clearable
            @clear="clearValue(col.fieldName)"
          >
            <div v-if="col.selectList">
              <component
                :is="'el-option'"
                v-for="(sel, val) in col.selectList"
                :key="val"
                :label="sel.selectKey"
                :value="formatSelectVal(sel.selectValue, col.javaType)"
              />
            </div>
          </component>
        </el-col>
      </el-row>
      <el-row v-if="col.webType === 'textArea' && col.isSearch === 1">
        <el-col :span="8"> {{ col.nameCn }}: </el-col>
        <el-col :span="16">
          <el-input
            v-model="searchData[col.fieldName]"
            :type="col.javaType"
            :value-format="timeFormat"
            :placeholder="'请输入' + col.nameCn"
            filterable
            clearable
            @clear="clearValue(col.fieldName)"
          />
        </el-col>
      </el-row>
      <el-row v-if="col.isSearch === 1 && col.webType === 'el-date-picker'">
        <el-col :span="4"> {{ col.nameCn }}: </el-col>
        <el-col :span="9">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="searchData[col.fieldName + '_start']"
              type="datetime"
              :placeholder="col.nameCn + '开始'"
              style="width: 95%"
              format="YYYY-MM-DD HH:mm:ss"
              :value-format="timeFormat"
              @change="clearValue(col.fieldName)"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="col.webType === 'el-date-picker'" class="line" :span="1">
          -
        </el-col>
        <el-col v-if="col.webType === 'el-date-picker'" :span="10">
          <el-form-item prop="date2">
            <el-date-picker
              v-model="searchData[col.fieldName + '_end']"
              :type="col.javaType"
              :placeholder="col.nameCn + '结束'"
              :value-format="timeFormat"
              format="YYYY-MM-DD HH:mm:ss"
              style="width: 80%"
              @change="clearValue(col.fieldName)"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <div style="text-align: center">
      <el-form-item>
        <el-button type="primary" size="small" @click="searchSubmit">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetSearchForm"> 重置 </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script setup lang="ts">
// import { Prop, Component, Vue, Emit } from "vue-property-decorator";
// 默认值 prop

withDefaults(
  defineProps<{
    timeFormat?: string;
    formVisible?: boolean;
    searchData: object;
    formKey?: object;
  }>(),
  {
    timeFormat: "YYYY-MM-DD HH:mm:ss",
    formVisible: false
  }
);

const emit = defineEmits(["searchSubmit", "resetSearchForm", "clearValue"]);

const formatSelectVal = (val: any, type: string) => {
  if (type === "Integer") {
    return +val;
  } else {
    return val;
  }
};

const searchSubmit = () => {
  emit("searchSubmit");
};

const resetSearchForm = () => {
  emit("resetSearchForm");
};

const clearValue = (value: any) => {
  emit("clearValue", value);
};
</script>
<style lang="scss" scoped>
.select-card {
  border-radius: 15px !important;
  margin-top: 10px;
  margin-bottom: 20px;

  .el-row {
    margin-bottom: 15px;
    margin-right: 15px;

    &:last-child {
      margin-bottom: 0;
      text-align: center;

      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}
</style>
